<template>
    <div class="recommend">
        <sticky>
            <tab>
                <tab-item v-for="(item,index) in tabs" :key="index" @on-item-click="tabclick(index)"
                          :selected="sindex === index">
                    {{item.name}}
                </tab-item>
            </tab>
        </sticky>
        <section class="container">
            <div class="tabcon" v-for="(itemp,index) in tabs" v-show="sindex===index" :key="index">
                <scroller v-if="itemp.items.length>0"
                          :on-refresh="refresh"
                          :on-infinite="infinite"
                          ref="itemp.scroll"
                >
                    <ul class="listcon">
                        <li v-for="(item,kindex) in itemp.items" @click="jump(item.planId)">
                            <span class="datatime">
                                <icon name="clock"/>
                                <strong>{{item.deadline}}</strong>
                            </span>
                            <Matchmiddle :matches="item.matches"/>
                            <Bottominfo :deadline="item.deadline"
                                        :back="item.back"
                                        :winState="item.winState"
                                        :bean="item.bean"
                                        :timeState="item.timeState"
                                        :jinstate="item.matches | getwinstate"
                            />
                            <span class="footerinfo">
                                <strong>已付费<b>{{item.totalBuyer}}</b>人</strong>
                                <strong>待结算<b>{{item.totalBeans}}</b>彩豆</strong>
                            </span>
                        </li>
                    </ul>
                </scroller>
                <Nodate v-else type="6" spanvalue="暂无推荐数据"/>
            </div>
        </section>
    </div>
</template>

<script>
    import Matchmiddle from '../../components/Matchmiddle';
    import Bottominfo from '../../components/Bottominfo';
    import {getMyRecommondAllR, getMyRecommondLostR, getMyRecommondWonR} from '../../service/my';
    import {getMytoken} from '../../service/common';
    import {Tab, TabItem, Sticky} from 'vux';
    import {delay} from '../../uitls/common';
    import {concat} from 'ramda';
    import Nodate from '../../components/Nodata.vue';
    export default {
        components: {Tab, TabItem, Matchmiddle, Bottominfo, Sticky, Nodate},
        data() {
            return {
                tabs: [{
                    name: '全部推荐',
                    items: [],
                    page: 1,
                    scroll: 'scroll1',
                    fn: getMyRecommondAllR
                }, {
                    name: '命中推荐',
                    items: [],
                    page: 1,
                    scroll: 'scroll2',
                    fn: getMyRecommondWonR
                }, {
                    name: '未命中',
                    items: [],
                    page: 1,
                    scroll: 'scroll3',
                    fn: getMyRecommondLostR
                }],
                sindex: 0,
            };
        },
        created() {
            this.getDate(1);
        },
        filters:{
            getwinstate(matchs){
                let dd = 0;
                matchs.map((e, i)=> {
                    if(e.winState === 2) {
                        dd++
                    }
                })
                return `${matchs.length}中${dd}`
            }
        },
        computed: {},
        methods: {
            async tabclick(index){
                this.sindex = index;
                const {tabs, sindex}=this;
                if(tabs[sindex].items.length === 0) {
                    await this.getDate(1);
                }
            },
            async refresh(done){
                await delay(1000);
                await this.getDate(1);
                done();
            },
            async infinite(done){
                await delay(1000);
                const {sindex, tabs}=this;
                tabs[sindex].page = tabs[sindex].page + 1;
                const over = await this.getDate(tabs[sindex].page, true);
                if(over) {
                    tabs[sindex].page = tabs[sindex].page - 1;
                    done(true);
                    return;
                }
                done();
            },
            jump(id){
                this.$router.push(`/matchs/recommendmatchdetails/${id}`);
            },
            async getDate(page, loadermore){
                const {token}=await getMytoken();
                const {tabs, sindex}=this;
                if(!token) {
                    this.$vux.toast.text(data.msg);
                    return;
                }
                const {data}= await tabs[sindex].fn(token, page, loadermore);
                if(data && data.code === 0) {
                    if(loadermore) {
                        if(data.data.plans.length === 0) {
                            return true;
                        }
                        else {
                            tabs[sindex].items = concat(tabs[sindex].items, data.data.plans);
                        }
                    }
                    else {
                        tabs[sindex].page = 1;
                        tabs[sindex].items = data.data.plans;
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .recommend {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        .container {
            display: flex;
            flex-direction: column;
            flex: 1;
            .tabcon {
                display: flex;
                flex-direction: column;
                flex: 1;
                height: 100%;
                position: relative;
            }
        }
        .listcon {
            li {
                padding: 0 30px 0 30px;
                background: #fff;
                margin-bottom: 10px;
                .datatime {
                    color: @color2;
                    font-size: @fz30;
                    display: flex;
                    align-items: center;
                    line-height: 90px;
                    svg {
                        width: 28px;
                        height: 28px;
                    }
                    strong {
                        margin-left: 10px;
                        font-size: @fz30;
                    }
                }
                .footerinfo {
                    border-top: 1px solid @color12;
                    margin-top: 36px;
                    height: 82px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    color: @color3;
                    font-size: @fz26;
                    b {
                        color: @colororange;
                    }
                }
            }
        }
    }

</style>